<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俊哥·鉴 - Chriskang</title>
    <link rel="stylesheet" href="css/main.css">
    <style>
        body {
            background: none;
        }
        .index-bg-full {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            background: linear-gradient(120deg, rgba(58,90,108,0.38) 0%, rgba(194,59,35,0.13) 100%), url('assets/images/forbidden city1.jpg') center center/cover no-repeat;
            filter: blur(2.2px) brightness(0.93) saturate(1.08);
            opacity: 0.98;
            pointer-events: none;
        }
        .main-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
            position: relative;
            z-index: 1;
        }
        .main-title {
            font-family: 'Kaiti', '霞鹜文楷', serif;
            font-size: 4.2rem;
            color: #222;
            letter-spacing: 0.32em;
            margin-top: 3.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 0 4px 24px #fff8, 0 1px 0 #b0a084;
            position: relative;
            z-index: 2;
            animation: brushIn 2.2s cubic-bezier(.7,0,.3,1) 0.2s both;
        }
        .main-signature {
            font-family: 'Brush Script MT', '霞鹜文楷', cursive;
            font-size: 2.1rem;
            color: #3a5a6c;
            letter-spacing: 0.18em;
            margin-bottom: 1.8rem;
            margin-top: 0.2rem;
            opacity: 0.92;
            text-shadow: 0 2px 8px #b0a08433;
            user-select: text;
            position: relative;
            z-index: 2;
        }
        @keyframes brushIn {
            0% { opacity: 0; filter: blur(8px); letter-spacing: 2em; }
            60% { opacity: 1; filter: blur(0); letter-spacing: 0.4em; }
            100% { opacity: 1; filter: blur(0); letter-spacing: 0.32em; }
        }
        .jade-bi-btn {
            width: 90px;
            height: 90px;
            background: url('assets/icons/icon-jade-bi.svg') center/contain no-repeat;
            border: none;
            border-radius: 50%;
            box-shadow: 0 0 24px #b0a08488;
            position: absolute;
            right: 8vw;
            top: 3vw;
            cursor: pointer;
            z-index: 10;
            transition: box-shadow 0.3s;
        }
        .jade-bi-btn:hover {
            box-shadow: 0 0 40px #3a5a6c88, 0 0 0 8px #f7f1e355;
        }
        .dynasty-menu {
            display: none;
            position: absolute;
            right: 7vw;
            top: 8vw;
            z-index: 20;
        }
        .dynasty-menu.active {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            background: rgba(255,255,255,0.95);
            border-radius: 16px;
            box-shadow: 0 8px 32px #3a5a6c33;
            padding: 1.2rem 2.2rem;
        }
        .dynasty-menu a {
            font-family: 'Kaiti', '霞鹜文楷', serif;
            font-size: 1.3rem;
            color: #3a5a6c;
            text-decoration: none;
            transition: color 0.2s;
        }
        .dynasty-menu a:hover {
            color: #c23b23;
        }
        .quote-section {
            margin: 0 auto;
            margin-top: 2.2rem;
            max-width: 300px;
            background: rgba(255,255,255,0.92);
            border-radius: 14px;
            box-shadow: 0 4px 24px #3a5a6c33, 0 1.5px 0 #fff8;
            padding: 1.2rem 1rem 1rem 1rem;
            text-align: center;
            z-index: 20;
            position: relative;
            backdrop-filter: blur(1.5px);
        }
        .quote-text {
            font-family: 'Kaiti', '霞鹜文楷', serif;
            font-size: 1.1rem;
            color: #222;
            margin-bottom: 0.7rem;
            text-shadow: 0 1px 0 #fff, 0 0 8px #b0a08433;
        }
        .quote-source {
            font-size: 0.9rem;
            color: #3a5a6c;
            font-family: 'Kaiti', '霞鹜文楷', serif;
        }
        @media (max-width: 700px) {
            .main-title { font-size: 2.2rem; }
            .main-signature { font-size: 1.1rem; }
            .jade-bi-btn { width: 60px; height: 60px; right: 4vw; top: 2vw; }
            .dynasty-menu { right: 3vw; top: 10vw; }
            .quote-section { max-width: 90vw; }
        }
    </style>
</head>
<body>
    <div class="index-bg-full"></div>
    <nav class="main-nav">
        <span class="nav-seal">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="22" cy="22" r="20" fill="#c23b23" stroke="#a01a1a" stroke-width="3"/>
            <text x="50%" y="56%" text-anchor="middle" dominant-baseline="middle" font-size="28" font-family="KaiTi, 霞鹜文楷, serif" fill="#fffbe6" font-weight="bold">鉴</text>
          </svg>
        </span>
        <a href="index.html" class="active">首页</a>
        <a href="about.html">人物志</a>
        <a href="portfolio.html">学业坊</a>
        <a href="timeline.html">千秋纪</a>
        <a href="guestbook.html">访客阁</a>
        <button id="nightModeToggle" class="night-mode-btn" title="夜间模式" aria-label="夜间模式切换">
            <svg id="nightModeIcon" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="14" cy="14" r="10" fill="#f7f1e3" stroke="#b0a084" stroke-width="2"/>
                <path id="moonPath" d="M18 14a6 6 0 0 1-6 6A6 6 0 0 0 18 14z" fill="#b0a084"/>
            </svg>
        </button>
    </nav>
    <main>
        <canvas id="ink-bg-canvas" style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;"></canvas>
        <section class="main-hero">
            <div class="main-signature">Chriskang</div>
            <div class="main-title">俊哥·鉴</div>
            <button class="jade-bi-btn" id="jadeBiBtn" title="朝代导航"></button>
            <div class="dynasty-menu" id="dynastyMenu">
                <a href="timeline.html#xia-shang-zhou">夏商周</a>
                <a href="timeline.html#qin-han">秦汉</a>
                <a href="timeline.html#tang-song">唐宋</a>
                <a href="timeline.html#ming-qing">明清</a>
                <a href="timeline.html#modern">近现代</a>
            </div>
        </section>
        <section class="quote-section">
            <div class="quote-text" id="daily-quote">天行健，君子以自强不息。</div>
            <div class="quote-source" id="quote-source">—— 《周易》</div>
        </section>
    </main>
    <footer class="site-footer">
        <div class="footer-gold"></div>
        <div class="site-footer-inner">
            <div class="footer-badge-row">
                <img src="assets/icons/icon-jade-bi.svg" class="footer-badge" alt="玉璧徽章">
                <img src="assets/icons/icon-github.svg" class="footer-badge" alt="GitHub徽章">
            </div>
            <svg class="footer-flower" viewBox="0 0 68 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 14 Q18 2 34 14 T64 14" stroke="#b0a084" stroke-width="2.2" fill="none"/>
                <circle cx="34" cy="14" r="4.5" fill="#fffbe6" stroke="#c23b23" stroke-width="2"/>
            </svg>
            <span>&copy; 2025 俊哥·鉴</span>
            <a href="https://github.com/your-repo" class="github-link" target="_blank" rel="noopener">GitHub仓库</a>
        </div>
        <button id="backToTopBtn" title="回到顶部" aria-label="回到顶部">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="14" fill="#fffbe6" stroke="#b0a084" stroke-width="2.5"/>
                <path d="M16 22V10" stroke="#c23b23" stroke-width="2.5" stroke-linecap="round"/>
                <path d="M11 15l5-5 5 5" stroke="#3a5a6c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
    </footer>
    <script src="js/main.js"></script>
    <script src="js/nightmode.js"></script>
    <script>
        // 玉璧朝代菜单交互
        const jadeBtn = document.getElementById('jadeBiBtn');
        const menu = document.getElementById('dynastyMenu');
        jadeBtn.addEventListener('click', () => {
            menu.classList.toggle('active');
        });
        document.addEventListener('click', (e) => {
            if (!jadeBtn.contains(e.target) && !menu.contains(e.target)) {
                menu.classList.remove('active');
            }
        });
    </script>
</body>
</html> 